<template>
	<div class='goodsinfo-container'>
		<transition
			@before-enter='beforeEnter'
			@enter='enter'
			@after-enter='afterEnter'
			>
			<div class="ball" v-show='ballFlag' ref='ball'></div>
		</transition>
		<!--商品轮播区域-->
		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotuList='lunboList1' :isfull='true'></swiper>
					</div>										
				</div>
		</div>
		<!--商品购买区域-->
		<div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
							市场价： <del>￥{{goodsinfo.market_price}}</del>
							  &nbsp;&nbsp;
							销售价：<span class='now_price'>￥{{goodsinfo.sell_price}}</span>
						</p>	
						<p>购买数量：<numbox @export-num='getNumber' :max='goodsinfo.stock_quantity'></numbox>								
						</p>
						<p >
							<mt-button type='primary' size='small' >立即购买</mt-button>						
							<mt-button type='danger' size='small' @click='addToShopCar' >加入购物车</mt-button>
							<!--分析：如何实现加入购物车时候，拿到选择的数量
							1.按钮属于goodsinfo页面，数字属于numberbox组件
							2.由于涉及到了父子组件的嵌套，所以无法直接在goodsinfo页面中 直接获取到选中的商品数量值
							3.解决：子组件向父组件传值  事件调用的本质  父组件向子组件传递方法，子组件调用这个方法，同时把数据当做参数传递给父组件的方法
							-->
							
						</p>
					</div>
				</div>
		</div>
			
		<!--商品参数区域-->
		<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsinfo.goods_no}}</p>
						<p>库存情况：{{goodsinfo.stock_quantity}}</p>
						<p>上架时间：{{goodsinfo.add_time | dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type='primary' size='large' plain @click='goDesc(id)'>图文介绍</mt-button>
					<mt-button type='danger' size='large' plain @click='goComment(id)'>商品评论</mt-button>
				</div>
		</div>
		
	</div>
</template>

<script>
	//导入轮播图组件
	import	swiper from '../subcomponents/swiper.vue'
	//导入购买框
	import numbox from '../subcomponents/goodsinfo_numbox.vue'
	export default {
		data() {
			return {
				id: this.$route.params.id, //将路由参数对象中的id挂载到data，方便后期调用
				lunboList:[],  //轮播图的数据
				lunboList1:[{img:'http://pic.58pic.com/58pic/13/23/14/76r58PICTtz_1024.jpg'},
				{img:'http://58pic.ooopic.com/58pic/17/43/54/79S58PICFWc.jpg'}],
				goodsinfo:{},
				ballFlag:false,  //控制小球隐藏和显示
				numboxNumber:1  //点击加入购物车时候拿到的numberbox组件的值,
//				numnum:0  //父组件传递给子组件的值，方便子组件监听
			}
		},
		created(){
			this.getLunBoTu();
			this.getGoodsInfo();
		},
		methods:{
			getLunBoTu(){
				this.$http.get('api/getthumimages/'+this.id).then(result => {
					if(result.body.status == 0){
						result.body.message.forEach(item => {
							item.img = item.src;
						})
						this.lunboList  = result.body.message;
//						console.log('this.lunboList',this.lunboList)  有图片但是展示不出来
					}else{
						console.log('this.lunboList',this.lunboList)
					}
				})
			},
			getGoodsInfo() {
				this.$http.get('api/goods/getinfo/'+this.id).then(result => {
					if(result.body.status == 0){
						this.goodsinfo  = result.body.message[0];
						console.log('this.goodsinfo',this.goodsinfo)
					}else{
						console.log('this.goodsinfo',this.goodsinfo)
					}
				})
			},
			goDesc(id){
				//点击使用编程式导航跳转到图文介绍页面
				this.$router.push({name: "goodsdesc",params: {id}})
			},
			goComment(id){
				this.$router.push({name: "goodscomment",params: {id}})
			},
			addToShopCar(){
				//添加购物车
				this.ballFlag = !this.ballFlag;
				//	{id:is,count:count,price:price,selected:true}
				//拼接出一个要保存到store。state中的对象
				var goodsinfo =	{
					id:this.id,
					count:this.numboxNumber,
					price:this.goodsinfo.sell_price,
					title:this.goodsinfo.title,
					selected:true
				}
				//调用store中的mutations来将商品加入购物车中
				this.$store.commit('addToCar',goodsinfo)
			},
			beforeEnter(el){
				el.style.transform = 'translate(0,0)'
			},
			enter(el,done){
				el.offsetWidth;
				//小球动画优化思路
				//1.先分析导致动画不准确的本质原因 我们把小球最终位移到的位置已经局限在某一分辨率下，滚动条为滚动的条件下
				//2.因此，我们得到的结果，不能把位置的横纵坐标直接写死了，而是应该根据不同的情况。动态计算这个坐标值
				//3.经过分析，先得到微标的横纵坐标，再得到小球的横纵坐标，然后让y值求差，得到的结果就是横纵坐标要位移的距离
//				5.如何获取微标和小球的位置  domObject.getBoundingClientRect().bottom
				
				//获取小球在页面中的位置
				const ballPosition = this.$refs.ball.getBoundingClientRect()
				const badgePosition = document.getElementById('badge').getBoundingClientRect()
				const xDist  = badgePosition.left - ballPosition.left
				const yDist  = badgePosition.top - ballPosition.top
				el.style.transform=`translate(${xDist}px,${yDist}px)`;
				el.style.transition = 'all 1s cubic-bezier(.4,-0.3,1,.68)'
				done()
			},
			afterEnter(el){
				this.ballFlag = !this.ballFlag
			},
			getNumber(val){			
				this.numboxNumber = val;
//				console.log('父组件拿到子组件的值',this.numboxNumber)
			}
			
		},
		components:{
			swiper,
			numbox
		}
	}
	
</script>

<style lang="scss" scoped>
.goodsinfo-container{
	background-color: #eee;
	overflow: hidden;
	/*padding: 4px;*/
	.now_price {
		color:red;
		font-size: 16px;
	}
	.mui-card-footer {
		display: block;
		button {
			margin:10px 0;
		}
	}
	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: red;
		position: absolute;
		z-index: 99;
		top:346px;
		left: 136px;
		/*transform: translate(103px,275px);*/
	}
}

</style>